<template>
	  <view class="post-item" @click="todetail">
	    <!-- <image class="post-img" :src="obj.image" alt="Post Image" /> -->
	    <view class="post-img">	      <h3 class="post-title">{{ obj.title }}</h3></view>
	    <view class="post-details">
			<view class="text">
	      <!-- <h3 class="post-title">{{ obj.title }}</h3> -->

		  
	      <!-- <p class="post-meta">{{ obj.comments || 0}}评论 · {{ obj.timeAgo || 0}}</p> -->
	      <h2 class="post-meta">{{obj.summary}}</h2>
	      <p class="post-content">{{obj.content}}</p>
	    </view>
		</view>
	  </view>
</template>

<script>
	export default{
		name:"bokeItem",
		props:{
			obj:{
				default:()=>{}
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			todetail(){
				// console.log("跳转到详细");
				uni.navigateTo({
					url:"/pages/router/detail/detail",
				})
				setTimeout(()=>{
					uni.$emit("todetail",{obj:this.$props.obj})
				},1000)
			}
		},
		mounted() {
	
		}
	}
</script>

<style>
	
.post-list {
  display: flex;
  flex-direction: column;
}

.post-item {
/* 	box-shadow: #777 2px 0 4px 0;
	padding: 5px;
  display: flex;
  margin-bottom: 16px; */
  box-shadow: #777 2px 0 4px 0;
  padding: 5px;
  display: flex;
  /* margin-bottom: 16px; */
  width: 94%;
  margin: 0 auto 16px auto;
  border-radius: 4px;
  overflow: hidden;
}

.post-img {
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: #777 solid 1px;
  margin-right: 16px;
}

.post-details {
  flex: 1;
}

.post-title {
	max-height: 2ch;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
  font-size: 16px;
  font-weight: bold;
}

.post-meta {
	max-height: 2ch;
	max-width: 70%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
  font-size: 14px;
  color: #777;
}
.post-content{
	max-height: 4ch;
	/* max-width: 80%; */
}

.text{
	margin-top: 20px;
	float: left;
	max-width: 200px;
	max-height: 82px;
	overflow: hidden;
}
	
</style>